<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表页</title>
  <link rel="stylesheet" href="/css/list.css">
</head>
<body>
  <div class="shortcut"></div>

  <div class="header"></div>

  <div class="breadcrumb-area">
    <div class="layout">
      <a href="/">首页</a>
      &nbsp;&gt;&nbsp;
      <span class="shopTitle">列表页</span>
    </div>
  </div>

  <div class="pro-cate">
    <div class="layout">
      <!--功能栏-->
      <div class="pro-cate-area">
        <div class="pro-cate-attr clearfix">
          <div class="p-title">分类:</div>
          <div class="p-values">
            <div class="p-expand">
              <ul class="clearfix">
                <li>
                  <a href="">手机</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="pro-cate-attr clearfix">
          <div class="p-title">价格区间:</div>
          <div class="p-values">
            <div class="p-expand">
              <ul class="clearfix">
                <li>
                  <a href="">3999及以下</a>
                </li>
                <li>
                  <a href="">4000-5999</a>
                </li>
                <li>
                  <a href="">6000及以上</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="pro-cate-sort clearfix">
          <div class="p-title">排序:</div>
          <div class="p-values">
            <div class="p-expand">
              <ul class="clearfix">
                <li class="selected">
                  <a href="javascript:void(0);" id="currentOrder">最新</a>
                </li>
                <li>
                  <a href="javascript:void(0);" id="commentOrder">热度</a>
                </li>
                <li>
                  <a href="javascript:void(0);" class="sort-price" id="priceOrder">价格
                    <s></s>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!--/.功能栏-->

      <!--列表栏-->
      <div class="pro-list clearfix">
        <ul id="pro-list">
        </ul>
      </div>
      <!--/.列表栏-->

      <!--分页栏-->
      <div class="page">
        <div class="page-area"></div>
      </div>
      <!--/.分页栏-->

    </div>
  </div>

  <footer class="footer"></footer>

  <div class="sidebar"></div>

  <script type="text/html" id="listTemplate">
    {{ each list item}}
    <li>
      <a href="/detail.html?id={{ item.id}}">
        <p class="p-img">
          <img src="{{ item.imgSrc }}" alt="">
        </p>

        <p class="p-name">{{ item.name }}</p>

        <p class="p-price clearfix">
          <b>¥{{ item.price }}</b>
          <span>多款可选</span>
        </p>

        <p class="p-label">

          {{ each item.prom prom}}
          <span>{{ prom }}</span>
          {{ /each }}
        </p>

        <p class="p-comment">
          <em>
            <sapn>{{ item.comment }}</sapn>人评价
          </em>
          <em>
            <sapn>{{ item.rate }}</sapn>%好评
          </em>
        </p>

        {{ if item.comment > 10000 }}
        <p class="p-tag"><span>热卖</span></p>
        {{ /if }}
      </a>
    </li>

    {{ /each }}

</script>

  <script src="/libs/require/require.js" data-main="js/list"></script>

</body>
</html>
